<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" media="screen" type="text/css" href="./css/colorpicker.css" />
    <script type="text/javascript" src="/public/static/js/jquery-3.31.min.js"></script>
    <script type="text/javascript" src="./js/colorpicker.js"></script>
    <link rel="stylesheet" type="text/css" href="/public/templateUI/layui/css/layui.css" />
    <script type="text/javascript" src="/public/templateUI/layui/layui.all.js"></script>
    <script type="text/javascript" src="/public/transcode.js"></script>
    <script src="/public/ossUploadJs/myOssSdk.js" type="text/javascript" charset="utf-8"></script>
    <script src="/public/ossUploadJs/uploadAliyun.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
    .zhezhao5{
        position: absolute;
        width: 91%;
        height: 725px;
        z-index: 100000;
        display: none;
    }
    .zhezhao6{
        position: relative;
        width: 75px;
        height: 52px;
        z-index: 100000000000;
        top: -45px;
        left: 90px;
        display: none;
    }
    .selected-nav{
        background:#fff;
        color:#1e9fff;
    }
    .select_store span{
        float:left;
        margin-top: 10px;
    }
    .un_select_store span{
        float:left;
        margin-top: 10px;
    }
    .iphone-image{
        width: 241px;
        /*height: 367px;*/
        height: 443px;
        position: relative;
        left: 16px;
        /*top: 62px;*/
        top: 36px;
    }
    .color-red{
        color:red;
    }
    .iconName ul li{
        cursor: pointer;
        position: relative;
        top:0px;
        text-align: left;
    }
    .iconName ul li i.iconfont{
        padding:0 4px;
        /*display: none;*/
        visibility: hidden;
    }
    .iconName ul li i{
        /*padding:0 5px;*/
        /*display: none;*/
    }
    .iconName ul li:hover{
        color:#1e9fff
    }
    .phoneBottom{
        height: 6%;
        position: absolute;
        /*bottom: 104px;*/
        bottom: 17px;
        background: #fff;
        width: 238px;
        text-align: center;
        left: 18px;
        border-top: 1px solid #f3f3f3;
        border-radius: 0 0 24px 24px;
        z-index: 9;
    }
    .phoneBottom div{
        cursor:pointer;
        text-align: center;
        position: relative;
        right:0px;
    }
    .phoneBottom div span{
        display: block;
    }
    .phoneBottom .iphone_code{
        font-size: 18px;
    }
    .phoneBottom .iphone_code.icon_style1{
        margin-top: 2px;
    }
    .phoneBottom .iphone_code.icon_style2{
        margin-top: 4px;
    }
    .phoneBottom .iphone_code.icon_style3{
        margin-top: 8px;
    }
    .phoneBottom .iphone_code.icon_style1 i{
        font-size: 25px;
    }
    .phoneBottom .iphone_code.icon_style2 i{
        font-size: 27px;
    }
    .phoneBottom .iphone_code.icon_style3 i{
        font-size: 30px;
    }
    .phoneBottom .iphone_code img{
        width: 18px;
    }
    .phoneBottom .iphone_code.icon_style1 img{
        width: 25px;
    }
    .phoneBottom .iphone_code.icon_style2 img{
        width: 27px;
    }
    .phoneBottom .iphone_code.icon_style3 img{
        width: 30px;
    }
    .phoneBottom .iphone_name{
        font-size: 12px;
        -webkit-transform: scale(0.6);/* Safari 和 Chrome */
        transform:scale(0.6);
        -ms-transform:scale(0.6); 	/* IE 9 */
        -moz-transform:scale(0.6); 	/* Firefox */
        -o-transform:scale(0.6);    /* Opera */
        transform-origin: 50% 0;
    }
    .phoneBottom .iphone_name.icon_style0{
        display: block;
    }
    .phoneBottom .iphone_name.icon_style1,.phoneBottom .iphone_name.icon_style3{
        display: none;
    }
    .iconfont-style{
        font-size: 25px !important;
        margin-left: 25px;
        cursor: pointer;
    }
    .conf-nav-div-whole{
        flex:1;
    }
    .conf-nav-div-whole.icon_style2, .conf-nav-div-whole.icon_style3{
        margin-top: -12px;
        border-radius: 50%;
        background-color: #ffffff;
        border-top: 1px solid #f3f3f3;
    }
    .icon_show i{
        position: relative;
        font-size: 45px;
        top:20px;
        left: 2px;
    }
    .icon_show img{
        position: relative;
        font-size: 45px;
        top: 24px;
        left: 2px;
        width: 52px;
    }
    .property{
        padding: 40px 30px;
    }
    .property a{
        padding:0 25px;
        margin-left: 0!important;
        margin-right: 15px;
        margin-bottom: 30px;
        background: #fff;
        color:#333333;
        border: 1px solid #C9C9C9;
    }
    .property a:hover{
        color:#333333;
    }
    .type1{
        border:1px solid #1E9FFF!important;
    }
    .type2{
        background: #ECECEC!important;
        border:none!important;
        color:#A6A6A6!important;
    }
    .phonetop{
        text-align: center;
        position: relative;
        background-size: 100% 100%;
        /*top: 62px;*/
        top: 36px;
        width: 238px;
        left: 18px;
        height: 30px;
        line-height: 30px;
        color:#fff;
        background: #d22222;
        border-radius: 3px 3px 0 0;
    }
    .colorPicktop{
        position: relative;
        top: 15px;
        width: 30px;
        z-index: 100;
        left: 85px;
    }
    .iphone_template{
        position: absolute;
        top: 0;
        z-index: 1;
        left: 0;
        width: 274px;
        height: 560px;
    }
    .statusbar_box{
        position: absolute;
        z-index: 0;
        top: 16px;
        left: 18px;
        width: 238px;
        height: 20px;
        border-radius: 24px 24px 0 0;
        box-sizing: border-box;
        padding: 0 10px;
    }
    .colorpicker{
        z-index: 999;
    }
    .statusbar_box.whiteBg{
        background-color: #ffffff;
    }
    .statusbar_box.blackBg{
        background-color: #000000;
    }
    .statusbar_box .statusbar_time{
        float: left;
        font-size: 12px;
        font-family: 微软雅黑;
        padding-left: 10px;
        margin-top: 4px;
        font-weight: bolder;
    }
    .statusbar_box.whiteBg .statusbar_time{
        color: #000000;
    }
    .statusbar_box.blackBg .statusbar_time{
        color: #ffffff;
    }
    .statusbar_box.blackBg .statusbar_img_b,.statusbar_box.whiteBg .statusbar_img_w{
        display: none;
    }
    .statusbar_box.blackBg .statusbar_img_w,.statusbar_box.whiteBg .statusbar_img_b{
        display: block;
    }
    .layui-form-radio>i:hover, .layui-form-radioed>i{
        color: rgb(30,165,251) !important
    }
    .navForm .layui-form-radio{
        margin: 0;
        padding-right: 0;
        margin-left: 5px;
    }
</style>
<!-- 图标加载 -->
<style>
    @font-face {font-family: "iconfont";
        src: url('iconfont.eot?t=1530252891394'); /* IE9*/
        src: url('iconfont.eot?t=1530252891394#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAABSMAAsAAAAAIMwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZXAkrEY21hcAAAAYAAAAEcAAADNEE99rVnbHlmAAACnAAADvUAABdgi1clBmhlYWQAABGUAAAALwAAADYR6SKfaGhlYQAAEcQAAAAeAAAAJAfwA+VobXR4AAAR5AAAABkAAABgYFgAAGxvY2EAABIAAAAAMgAAADJFFkAAbWF4cAAAEjQAAAAfAAAAIAF/AjtuYW1lAAASVAAAAUUAAAJtPlT+fXBvc3QAABOcAAAA7QAAAWBqLOFUeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWGcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBwYKl6cY27438AQw9zAMAUozAiSAwDkqwxdeJzFkj1uAjEUhMewIckuSTa/iC6gFChaRTkB3IAaai5AyRURiCOknPUZaMh4h2Y7mih++izbepaf3wyAKwBdUYkM6JQIWiHkOg3NeRd5c57hR/sJ3rW6wYaBGQuWHHLEilPOueSK63pcH+MsbuM+Hk4n3dgQysxbmYtW5u6ceckIqmCCT0XViq9WfDeZ9+ihg0c84QF93KnqUr+51Z8zvKDAtX72jFe8YaD03oUV/MEI//d0e/TTFD7OO3UFmzMqkTDqKxiMOix1jXoN5kZdBwuj/oOlkRLg0KTXODJSB6yMdAKnBune3CSfcmGkIrg0ycNcmeRhro00Rj02Uhv10Uh3xJlJ3o5bIy8g7oxcgbg38gfiwWDwCw5Jb814nK04C5QU1ZXvvldVr2u6u6qru6tquns+3V3TXTDMh/4DA9PjwPIVFBk+gkYNHPCY1WHBoywSZI0mKpwsydloIIYQ9IBs1hiFkKwSZ0SCOUpMjusRXIyCm8Q10XNcze4RmSr2VvdAMCErm2NXvffuu+++V/fed9+99zURCTl7ih1kjSRCxpAcmUauJASkcZBWaDOk7GIXHQd6StTNqMJsy05xK93FpoCZlqJGvlzMmhKXVFCgBQqpfNnuojaUir20B/JGM0AsEV8QzjSF2VZoaLRb7nFn012gt1pNam+nO6ujGs0nI77bA+FwLBze4pNE0UepoCpws2nIotwguY+Ialw/2DqWtkIgZscvvzqYTIRvuLd4S3PGlAE2bYJIIqnsqWpxDd8NcSMSjvFQ0NcYD1ptUbj91/7GSKA5+x8EfwLK+rcCoe8SlbQSi3QTIqa6wNZ6oZJqAVNTANKSrkUNT5SSVsxakNJTkazE9RaoQi/YbOfI8NgyQHks66u1Iw8q4bDC+rzaSdJNziYnkQJIxR+NQTyKdLRON9bBeXQIiYY9UooTHNJH7whqiX9NaMGlalYhDPk7yo6wIskibxMJydg5qNgFT83IF0ct61HDzFoKcGQXuS7VGrELiuW8EZVYsVxBIqsL2E973A8nof5TqXx6kvvctLljbS6VpgNML5Wm0+q3Ft+43ylrjY2WadK2JK3m1/b94Hdre0CZCDgjHZsIk6ftv3HOfT2jM+j0EuQqAHNDYFreNNjXtzbvPJuyhN95ugXk/TG2gy0gs7HThVyYhsRRuTWwBepgWgHDLBtmFDGmUcihlouIngJZ20OUK6hiBKJSC3hwCQXx+aLRBmAgzPmp5ouGZWCS5W8Jj11phGXmEwoCSJ+/SpbVqMAE2qC1hQLNclzwzf0ao/6I7ps0RfgSHeKsIdyQqsYG9zZI4A83BJz1xphAo+ZRwM13Cuz6f86LUUXmSlYRculAS1AWAh2be/JfvUKORPA75bvn/eq4J2cDyvlbgbB4zYbGkQqZSq4gy8g6soU8+On2JKbS2WIZu7hb/C/C3n56K3wSD91g2dxSweStgItWPRXmK+UKq+JQFQoVs9AK3FTB4rbVDZVINq1CqWBWCjrbN7I9NQ5gXIqtrLUjf+9XVT9b6dVuwf25X1H8UKj1Ph3uPUtqMEEYXmsPFdrbC6H2UKidtwZ6erhfFFUA3h46FZNbY7FWOSbL56HlvqgvJbe3y3HoSNLtyQ7A1lmZ7KBnFb+z0luXbvcr21RdxXe7aiiKoa6s91aBYqBOsVpVR8ATLbkWfHO5Ft11taAfv065BlRvyTVHmsNhrM617mnO03tbWvYSint4hP0d6yF+zwegtdq4Y7hhSu1QYbd+wLD2fFwpVx/Va50ugDMDg5QODgwMMjZYmDIL2DfXrtnGYE71xo1Ub9XZni9u2C0iQO+CVXT1wCj16mzb+svXbKN025q5G6z2A7eFotHQF3cLwsN3iB647kfnfNQwe5b1kUbSRsqkijaVxiNiZ4t4ICrlfO3kRDnyJrHzfqALIixrZ7KSGTFMEQ9WuVLMeJbj2Q0lyxZcuSHd1pbecOWCAwMIWhaCA8v2nhTFk3v3nhKEU4ufBOYekhrYk5RCL2UyuGf1pqb2pqY+pJ2/4MCC+fVp50A2z5taX+Ck8yWoUrpf8EvuMIMfAsjsiDe3vYloKM8z7BDrJwZpRonaSRcpkAko19+QWWQeWUCWkhvIjWSQ3IY7gQLlpLSdq+9IDqXNoYCZQrliSVzEghCGI6y5jqVkGeYUwMrGUsjalUIJaSolLDp2mwErD4+jERzAJUXs4IqAK+C3MjgLP8UOCW89bnQZj78lnAdGdu0VrG05iU2ot794amtWeGre+Ec2jp/3lJC9cq+U22YJ2Ytir97aOWv+l7vdW2Z1bu3+8nz343ofvl7vw6Z9H+mU6h/tO9dGli8ZWJX1qqcXrzi1Y+qyHTuWTT389IrFT68aWLI8ezGke/qa6cpA367p1/QNKPT+CzqkFkd+wY6zMolhlOshRIZsmoMXsKug1QN1RTO98A2WVix7sRrjOwZ9rQsw8ktcs9LZkgaof2C/dK/RS1H3Gq7q3IJMM/1qcwayPl11t78r86NcPiXzHYg/iugdXIZ5YkCE2XAnPByNutciHbfcbzRls00waOMa7hYASZalDyQM3x7aPStLsAOnie6BOu/D7CesWuN9LNpECjdKt+p+1Ex5Qa/gsY+hIZfSCsxzrjAewRTb4Nzb1Ab9iUwmQack2mAjFmh7zXluKg0r8Lo7na5z7kVn2ZbYmEk4w7XRRD8Sb0i0jTxH+9y0EqYHnbu9cygjHz9mP2MzSQeZTC4nS8gKsppsIPeSf0KePBVFJSvlaanunj3uPB+P5uQxjFqu8Yo+Hzx20W3YXtjGPKJSV3iz590xUpdSlpdKIQqjPLp7qR4t/jLMLqS/AGZPyEGIqE5IjURU+g01EowGoTPtfCHdCdjS97ENOskXGpMAycZ6E+TCCwKvVbT1QEMw2FCrnCNyMCjTSf8XfODPK/oqksyqff59r3bu8kboxjoDTmiUkR81BN1nk7FDdUYOxZJnPBYOiRIahohM47sxGAniu+YTDZ3/iW7dVz7NPmaXYyz2stcJhETAyFegXLRHLT4ThAwX0dQrGUwtsraI3iWDGasRhBrkecvamAXP+w0/PG8Y7kQE3IkGfAir3a3u1kFY9LloVxT2o9MVRHcmwu5MUVA4e3W0o1MTRz0Sk8J/uyOSBILarYCIJn1G6X7n5ZdfHj5c8vtPB9s1kZ0JBM4wUWtfMuL3j2g55XQgcFrJeTbHzvtKPzExtyDiBZHpQmfPUIJ0N/X8eyvmlujkOSVDLn5uqF7veVMQ3txTq4+hNzZ97H5fyJDX48kzQr7+83RDLptxjhBr51eU+nzC/R7ReuA+zfB5fPFavJzHevFUBNGLd+I9oeTlp4BmyfVUqYhu1qoCGqMKUs1MuzGoRnDUjIwehEg5CxYrRCytVujHbhBTFLqt+4eBdwLH3wgnWIjqGujhKA2xxFec/zKbaSdLN8JOM826oNldu6BpcPfg4OYFt9CXutsSibbuCUuWVMzwrZjEareGTff3SdMNmKiPVhP+YCbdINztbqiX0bi6E/O261GCGGZuHajdUj3Ye0m0RDOjiVsBNMzcOPKYQY0jCQqHFHTTlicYe2LLo68IwivOhLrv2AlJ9+TJ4eFhSmDxzI5CoWPm4kX91okHHjhh9WfOPvnkWfIBkgHxyJMjfZDcRDcNnyVbB+5Kz2patnpp86z0XXVf8z0hjLzFSBPyliYZtOZxGCnRLCCqQg4stFYL9BJmAZFyJZM3IzkDFRzhKT9YFV5A5afMiskLHDPlsA/csVROyMwd6/O9JIi0s4G/JLl8j7tv93YoHNn18WPfey91/wtgb74sfdl7p3fBQ3RC2M+c7Vyiq4D5M34QBDQcd6TB2U/HQuQ9Z5jGz75mvnrsWPS1rPM2jaFO0TjOHmSH2TQiEp0kkOMcuYzMIIvxHKJTimRKo1kwH82KL47N/D9o10XufgDcf4OOeBovWQn3Fa9Nxy6KhTMXotPxOjoVvygWTqBvgsl/RCQ8gpEDdez5NeMedv2lk9bsbhN7g21CD9VJxmMsIZVsuZ7HcbuctdFPYdqJ16NSmVQM4iWddu3mY9fSz1ZIsQoYtUsBOra825tcvPSNpYuTve1Wpn/qrqn9GWvz5KoIyosvgiJC36Rs53jx7e9//21xfOd1cPCNZojjFcY5itcYiDdkz6x4/Yo5c654fUX/3B2lYrG0Y+6/9z9ytTdVdD948dpdfZMr98zAybjEjHsqJ2D9gIuhFYXU4M0Q7rn3f8Ex9ls2Cy20GzO5KulHG0V5DBUDHUa1StmLhVI3XlVrTJdqCYad7QWjlaa9OK2ZulkSS8VyKxho3FK2oldo8Cq5LSRXvxOzNqtNTepmK+asiKet2Heqkmg08qveAncifWjyOufhFvVlFd+WKevo4/eprepNVuy7UyVNc/dpmjR1KGZ5uqfXxayb/KYi+e+b7HyXXveb2yf9/p23NY3fKlvyrVx7/h5k+1qU5SfsOTYV44eFslQwV6rifW4GmYN3ugVox8vIdWQ5WUW+gPnpWnI7uYP8A2YAW8hWzAK+SR4iO8kj5FHyL+QHZD/5MTlIhslh8jNylPySHCcnya/Jf5J3yfvkD+QjMgIEBPBBAEIQhUZogiS0wRh0k3kowyTohX6YjmnTPLgKFsFS+Bx8HlbCTXALrIHb4Cvwj/At2A1H4RU4Du/D/8AIZTROu/Cknc8/6vkIWKViuhkdRrQHtyA/BXelmPkzGr1gfxZlHJiFEm4hLxQrHBH6Z1MMs5ItmRw9QMnKFxBX+SyKxM1y1RO99BkUm5sIZG0Dn7yFj13j2s7COSlKhZJplysmRkirJOH1nCNS8kYQkLhhcrywGCZebfAtFcolrEwL18YWbzY68nueTkJXURlt6vMq9doykKBs1r5necO438hXocYEu4gp9Ooqm6zqujpyWNVpalF4oc+3MLxIdl69cIBdn0h0/hWvARDvlvD6eIk/KnIxxAQxEIDev+qLTaIsKKJwSd/CB4Cd+1kNPi5KDc63u7snre6czyKyLHJZLAmykLWFfFEsyiHul0xTDPhDvrLEjEamRx6TB+SV8kAGaFL0B0NSJKgYQkTxiSKXNG6zWKOQUISgIij+ZqCi37+0R85LCo/IWbl59uzz6mYt51Stq3TagCwPgLZQlhdqp/+IZ9dfohZFSfZzOxH+9EeQRdHnS6ImLuFnykwWg52JmZ/6TKc8HKvrNiFjEi9S0fnNGLksy6umyEaLoAYGpvsyoRBe+1CpSlASeUjmEvP7/YrMubxCFG++YcmSxYIgNvhEvOn7fCJnkiRKjDeoc7kPUX6O28UwEkkS9wdKHc2qFBnT3WpZMofuCxQ4+l/kzzHXK3gZtQhiBhyXUQZOgS3/2PmTcRkyojfmIA0rjHwbCbw8fIidYHlCiUQw6uGZAxNssCtewo3Z9p3Dx+jCIeeDZ+jIM4lIPrIqHH5wuJFFh5wPh+DOoUQ4vCqSiyIr/wtDC2L7AAAAeJxjYGRgYADiR23zf8Tz23xl4GZhAIHr0e+jEfT/HBYh5gYgl4OBCSQKAGCQC7YAeJxjYGRgYG7438AQw+LDAAQsQgyMDKhAAgBP4ALfAAB4nGNhYGBgfsnAwMJABlYGYh/8agBzlAG4AAAAAAAAAAB2AMYBJAGYAnoCyAMwA+oESASMBV4FxgYSBnQGwgceB7AIGAh+C2oLeguKC7AAAHicY2BkYGCQYNJniGUAASYg5gJCBob/YD4DABf4Ab0AeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicbU/LcoMwDPQmTWgokKTP9AN67CGfZIOxRYnNjPEE+PoK0un0UM3Ykrwr7VqsxC1S8X+csMIad9hgiwT32CHFAzLkKLDHAUc84gnPeMEr3nDCu8Cwq0i6YKmJm8mS8vvSX4hCLZX0LUmftFRqF3Q6emdsvJAz21oOPFRcpTNt9KWN0inP43HUacNIS1O0ejuQu2qXTDPe03rUIQlWOuYnhp+M8sUPVvFWVs9ZW5HTFdM6nan4xawb82Mxp3zNXbB61jcN9ZyG3+PMsY/d8h1GF1vnbPbT+/hZ+m7M/zbnQlfUL+VyCfENa3NngAAAAA==') format('woff'),
        url('iconfont.ttf?t=1530252891394') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url('iconfont.svg?t=1530252891394#iconfont') format('svg'); /* iOS 4.1- */
    }
    .iconfont {
        font-family:"iconfont" !important;
        font-size:16px;
        font-style:normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
</style>
<style>
    body{
        min-width: 1300px;
        /*overflow-y: hidden;*/
        min-height:700px
    }
    .main-content{
        width:89%;
        height:90%;
        min-height: 90%;
        background: rgb(244,244,244);
        float:left;

    }
    .content{
        width: 90%;
        height: 93%;
        background: #fff;
        margin: 0 auto;
        position: relative;
        top: 1%;
        padding: 0 4% 3% 4%;
        overflow-y: auto;
    }
    .contentTitle{
        font-size: 14px;
        color:#5F5E5E;
        /*border-bottom: 1px dotted;*/
        padding: 1%;
    }
    .contentInput{
        padding: 1%;
    }
    .contentInput input{
        width:20%
    }
    .contentTitle img{
        width:80px;
        height:80px;
        border-radius: 20px;
        margin-top: 2%;
    }
    .contentTitle.version_box{
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: space-between;
        -webkit-box-pack: space-between;
        -moz-justify-content: space-between;
        -webkit-justify-content: space-between;
    }
    .layui-tab-brief>.layui-tab-title .layui-this{
        color:rgb(30,165,251) !important
    }
    .layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after {
        border: none;
        border-radius: 0;
        border-bottom: 2px solid rgb(30,165,251) !important;
    }
    .zhezhao{
        width: 100px;
        height: 50px;
        z-index: 100000000;
        position: absolute;
        top: -10px;
        left: 385px;
        cursor: pointer;
    }
    .zhezhao2{
        width: 100px;
        height: 50px;
        z-index: 100000000;
        position: absolute;
        top: -10px;
        left: 93px;
        cursor: pointer;
    }
    .zhezhaox{
        width: 100px;
        height: 50px;
        z-index: 100000000;
        position: absolute;
        top: -10px;
        left: 190px;
        cursor: pointer;
    }
    .zhezhaoy{
        width: 100px;
        height: 50px;
        z-index: 100000000;
        position: absolute;
        top: -10px;
        left: 285px;
        cursor: pointer;
    }
    .addStart{
        width:200px;
        height:100%;
        /*border: 1px dashed #333333;*/
        display: flex;
    }
    .layui-tab {
        margin: 1% 0;
        text-align: left!important;
        height: 96%;
    }
    .layui-tab-content {
        padding: 10px;
        height: 92%;
    }
    .layui-show{
        height:100%
    }
    .layui-tab-title{
        /*height:5%*/
    }
    .layui-tab-content {
        padding: 1%;
    }
    .addStart img{
        width:170px;
        height:100%;
        border-radius: 0;
        margin-right: 50px;
    }
    .submitMessage{
        padding: 0 3% !important;
    }
    .productTop{
        width: 96%;
        background: #F7F7F7;
        padding: 1% 2%;
        height: 7%;
        line-height: 300%;
    }
    .productTopLeft{
        float:left
    }
    .productTopLeft span{
        font-weight: bold;
        float:left
    }
    .productTopLeft ul{
        display: flex;
        float:left;

    }
    .productTopLeft ul li{
        margin: 0 10px;
        cursor: pointer;
    }
    .productTopRight{
        float:right
    }
    .productMain{
        /*height:500px;*/
    }
    .mainLeft{
        float:left;
        width:70%
    }
    .mainRight{
        float:left;
        width:28%;
        padding: 10px 0;
        border-top: 1px solid #E8E8E8;
        margin-top: 20px;
        margin-left: 2%;
    }
    .zujiancard{
        margin-top: 20px;
        border: 1px solid #B9B9B9;
        padding: 1% 2%;
        height: 117px;
    }
    .peizhi1{
        height:100%
    }
    .peizhi2{
        display: none;
    }
    .peizhi3{
        display: none;
        height:100%
    }
    .iphone{
        width:30%;
        float:left;
        /*background: url(/public/images/iphone6.png) no-repeat;*/
        /*background: url(/public/images/iphoneX.png) no-repeat;*/
        /*background-size: 274px 560px;*/
        /*height:600px;*/
        height:560px;
        /*margin-top: 50px;*/
        position:relative;
    }
    .peizhi{
        width:70%;
        float:left;
        height:650px;
        /*background: red;*/
        border: 1px solid #E8E8E8;
        box-sizing: border-box;
        /*margin-top: 50px;*/
        position: relative;
    }
    .iconName{
        width:22%;
        height:100%;
        float:left;
        background: #FDFDFD;
        color:#4A4A4A
    }
    .iconProp{
        width:100%;
        height:100%;
        float:left
    }
    .iconName ul li{
        line-height: 40px;
        /*text-align: center;*/
    }
    .iconTop ul{
        display: flex;
        border-bottom: 1px solid #dfdfdf;
    }
    .iconTop ul li{
        padding:10px 50px;
        border: 1px solid #DFDFDF;
        /*background: #dfdfdf;*/
    }
    .iconTop ul li:first-child{
        padding:10px 50px;
        background: #1EA5FB;
        color:#fff;
        border:none
        /*background: #dfdfdf;*/
    }
    .iconSelected{
        padding: 20px;
        height:240px
    }

    .nameTitle ul li{
        display:block ;
    }
    .lay-content{
        position: relative;
        left: 101%;
        width: 403%;
        padding: 0 !important;
        height: 100%;
        top: -41px;
    }
    .erji ul li{
        display: inline-block;
    }
    .nameTitle ul li i{
        margin: 0 5px;
        color: #1EA5FB;
    }
    .nameTitle ul li span{
        display: none;
    }
    .zhezhao3{
        width: 90%;
        height: 93%;
        position: absolute;
        z-index: 10000000;
        top: 52px;
        display: none;
    }
    .productTopLeft ul :first-child{
        color:#1E9FFF
    }
    .layui-form-onswitch{
        border-color: #1E9FFF;
        background-color: #1E9FFF;
    }
    .deletebase{
        color: red;
        position: relative;
        top: -7px;
        left: 9px;
        display: none;
    }
    #updateText{
        width: 100%;
        height: 200px;
        padding: 10px;
        margin-top: 10px;
        border: 1px solid #e6e6e6;
        resize: none;
        border-radius: 5px;
        color: #333333;
    }
    .layui-form-select dl dd.layui-this{
        background-color: #1E9FFF;
    }
    .nav-tips{
        padding: 0 40px;
        position: absolute;
        top: -50px;
        left: 0;
        color: #aaaaaa;
        font-size: 14px;
    }
</style>
<body>
<div style="width: 100%;padding-top: 10px">
    <form action="">
        <!--<div class="layui-form-item" style="margin-bottom: 0">-->
            <!--<label class="layui-form-label" style="width: 113px!important;">状态栏文字颜色：</label>-->
            <!--<div class="layui-input-block" style="display: flex;line-height: 37px">-->
                <!--<div>-->
                    <!--<input type="radio" name="bgColor" value="2">-->
                    <!--<span>黑色</span>-->
                <!--</div>-->
                <!--<div style="margin-left: 20px">-->
                    <!--<input type="radio" name="bgColor" value="1">-->
                    <!--<span>白色</span>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
        <div class="layui-form-item"  style="margin-bottom: 0">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 113px!important;">头部文字颜色：</label>
                <div class="layui-input-block" style="margin-left: 143px">
                    <img src="./images/Oval.png" width="30px"  class="colorPickTitle" alt="">
                </div>
            </div>
            <div class="layui-inline" style="margin-left: 20px">
                <!--<div class="layui-form-item"  style="margin-bottom: 0">-->
                    <label class="layui-form-label" style="width: 113px!important;">头部背景图设置：</label>
                    <div class="layui-input-block" style="margin-left: 143px">
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-xs nav_upload" style="margin-top: 7px">上传</button>
                    </div>
                <!--</div>-->
            </div>
        </div>
    </form>
</div>
<div class="iphone">
    <img class="iphone_template" src="./images/iphoneX.png" alt="">
    <div class="statusbar_box whiteBg" >
        <div class="statusbar_time">9:41</div>
        <img class="statusbar_img_w" src="./images/electric_w.png" style="float: right;margin-top: 5px;" width="15px" alt="">
        <img class="statusbar_img_w" src="./images/wifi_w.png" style="float: right;margin-top: 9px;margin-right: 4px" width="10px" alt="">
        <img class="statusbar_img_w" src="./images/signal_w.png" style="float: right;margin-top: 9px;margin-right: 4px;" width="8px" alt="">

        <img class="statusbar_img_b" src="./images/electric_b.png" style="float: right;margin-top: 5px;" width="15px" alt="">
        <img class="statusbar_img_b" src="./images/wifi_b.png" style="float: right;margin-top: 9px;margin-right: 4px" width="10px" alt="">
        <img class="statusbar_img_b" src="./images/signal_b.png" style="float: right;margin-top: 9px;margin-right: 4px;" width="8px" alt="">
    </div>
    <div class="phonetop">
        <span style="margin-left: 30px"></span>
        <img src="./images/Oval.png" class="colorPicktop"/>
    </div>

    <img class="iphone-image" src="./images/icon_goods_thumb_empty_300.png"/>
    <!--<img src="./images/Oval.png" style="position:relative;top:245px;width:30px;z-index: 100" class="colorPick"/>-->
    <div class="phoneBottom" style="display: flex;flex-direction: row;">
    </div>
</div>
<div class="peizhi">
    <div class="nav-tips">
        勾选导航栏前面的单选按钮，表示该导航栏为默认跳转的导航栏，若所有导航栏都没进行勾选，默认跳第一个导航栏；
        <br/>
        开启“登录才能查看”的导航栏无法进行勾选
    </div>
    <div style="float: left;width: 100%;box-sizing: border-box;margin: 10px 0;padding-right: 50px;display: flex;align-items: center;justify-content: space-between">
        <form action="" class="layui-form">
            <div class="layui-form-item"  style="margin-bottom: 0">
                <label class="layui-form-label" style="width: 140px!important;">选择版本：</label>
                <div class="layui-input-block" style="width: 300px;margin-left: 170px">
                    <select name="version" lay-filter="version">

                    </select>
                </div>
            </div>
        </form>
        <button class="layui-btn layui-btn-normal layui-btn-sm" onclick="icon_submit()">保存</button>
    </div>
    <div class="iconName">
        <form class="layui-form navForm" lay-filter="navForm">
            <ul>
            </ul>
        </form>
        <div class="add_nav" style="text-align: center;margin-top: 10px">
            <img src="./images/add.png" style="width:50px"/>
        </div>
    </div>
    <div class="iconProp" style="width:78%">
        <div class="layui-tab layui-tab-card erji" style="border:none;height:100%;margin: 0">
            <ul class="layui-tab-title">
                <li class="layui-this">图标
                    <input type="hidden" name="now_nav_id">
                    <input type="hidden" class="upload_img" name="upload_img">
                    <input type="hidden" name="assembly_id">
                </li>
                <li>组件</li>
            </ul>
            <div class="layui-tab-content" style="height: 100px;">
                <div class="layui-tab-item layui-show">
                    <div>
                        <form class="layui-form" lay-filter="isNeedLoginForm" style="margin-top: 5px;margin-bottom: 0">
                            <div class="layui-form-item" style="margin-bottom: 20px">
                                <label class="layui-form-label" style="width: 90px!important;color: #AAAAAA;">登录才能查看</label>
                                <div class="layui-input-block" style="margin: auto;padding-right: 90px;">
                                    <input type="checkbox" name="isNeedLogin" lay-skin="switch" lay-filter="isNeedLogin" lay-text="是|否">
                                </div>
                            </div>
                            <div class="layui-form-item" style="margin-bottom: 0">
                                <label class="layui-form-label" style="width: 105px!important;color: #AAAAAA;">导航栏图标样式</label>
                                <div class="layui-input-block" style="margin-left: 135px;padding-right: 90px;">
                                    <select name="icon_style" lay-filter="icon_style">
                                        <option value="0">默认样式</option>
                                        <option value="1">大图标（无名称）</option>
                                        <option value="2">大图标顶出导航栏</option>
                                        <option value="3">大图标顶出导航栏（无名称）</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="iconSelected" style="border-bottom: 1px solid #dfdfdf">
                        <p style="height:40px">
                            <span style="color:#AAAAAA;float:left">选中时</span>
                        </p>
                        <div>
                            <div style="width:100px;height:100px;border:1px solid #e8e8e8;margin-left: 5%;text-align: center;float:left;position: relative;">
                                <span class="select_icon_box icon_show"><i class="iconfont">&#xe658;</i></span>
                                <img src="./images/Oval.png" class="selected-icon" style="position: absolute;top: -16px;right: -16px;width: 30px;"/>
                                <p style="position: absolute;top: 110px;color: #949494;">75px*75px PNG</p>
                            </div>
                            <div class="select_store" style="padding:5px 0">
                            </div>
                        </div>
                    </div>
                    <div class="iconSelected">
                        <p style="height:40px">
                            <span style="color:#AAAAAA;float:left">非选中时</span>
                        </p>
                        <div>
                            <div style="width:100px;height:100px;border:1px solid #e8e8e8;margin-left: 5%;text-align: center;float:left;position: relative;">
                                <span class="un_select_icon_box icon_show"><i class="iconfont">&#xe658;</i></span>
                                <img src="./images/Oval.png" class="un-selected-icon" style="position: absolute;top: -16px;right: -16px;width: 30px;"/>
                                <p style="position: absolute;top: 110px;color: #949494;">75px*75px PNG</p>
                            </div>
                            <div class="un_select_store" style="padding:5px 0">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <form class="layui-form" lay-filter="bindTypeForm" style="margin-top: 5px;margin-bottom: 0">
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="color: #AAAAAA;">绑定类型</label>
                            <div class="layui-input-block" style="padding-right: 90px;">
                                <select name="bindType" lay-filter="bindType">
                                    <option value="1">外链</option>
                                    <option value="0">组件</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item OutUrl">
                            <label class="layui-form-label" style="color: #AAAAAA;">外链</label>
                            <div class="layui-input-block" style="padding-right: 90px;display: flex;align-items: center">
                                <input type="text" lay-verify="url" style="width: 280px;margin-right: 20px" name="load_out_url" autocomplete="off" placeholder="请输入外链" class="layui-input">
                                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm setOutUrl">设置</button>
                            </div>
                        </div>
                    </form>
                    <div class="property property-assembly">
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>
<div style="float:right;margin-top: 25px">
    <!--<button class="layui-btn layui-btn-primary" onclick="to1()">上一步</button>-->
    <input type="hidden" name="version_id" />
    <input type="hidden" name="app_id" />
    <!--<button class="layui-btn layui-btn-normal" onclick="icon_submit()">下一步</button>-->
</div>
<script src="./js/base64.js"></script>
<script>
    var laydate = layui.laydate, element = layui.element,form = layui.form;
    var VersionInfo = {};
    var version_id = null;
    var nav_img = null;
    var defaultId = '';
    var nav_ids_array = []; //tab位置变化
    form.render();
    var assembly_ids = [];
    function to1(){
        $(".peizhi1").show();
        $(".peizhi2").hide();
    }
    $(".setOutUrl").click(function () {
        var load_out_url = $("input[name='load_out_url']").val();
        var nav_id = $('input[name="now_nav_id"]').val();
        if (!isEditFun()){
            return false
        };
        if(!(/(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/.test(load_out_url))){
            layer.msg("外链请填写包含http://或者https://的链接");
            return false
        };
        var tabIndex = null;
        for (var i = 0;i<VersionInfo.content.length;i++){
            if (VersionInfo.content[i].key==nav_id){
                tabIndex = i;
            }
        };
        $(".conf-nav-li-"+nav_id).data('androidsrc',load_out_url).data('iossrc',load_out_url);
        VersionInfo.content[tabIndex].androidSrc = load_out_url;
        VersionInfo.content[tabIndex].iosSrc = load_out_url;
        VersionInfo.content[tabIndex].native = false;
        return false
    });

    //提交
    function icon_submit() {
        if (!isEditFun()){
            return false
        }
        var newData = {config:JSON.parse(JSON.stringify(VersionInfo.config)),content:[]};
        if (nav_ids_array.length){
            for (var i = 0;i<nav_ids_array.length;i++){
                for (var n = 0;n<VersionInfo.content.length;n++){
                    if (VersionInfo.content[n].key==nav_ids_array[i]){
                        newData.content[i] = JSON.parse(JSON.stringify(VersionInfo.content[n]));
                        newData.content[i].key = 'tm_'+i;
                    }
                }
            }
        }else{
            newData.content = JSON.parse(JSON.stringify(VersionInfo.content))
        };
        var base = new Base64();
        var num = 0;
        layer.confirm('保存后将会在客户端实时生效，确定更新此次操作吗？', {
            btn: ['确定','取消'] //按钮
        }, function(){
            layer.load(1);
            $.ajax({
                type: "post",
                url: "/system/system/setVersionconf",
                cache: false,  //禁用缓存
                data:{
                    id: version_id,
                    value: base.encode(JSON.stringify(newData))
                },
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("token", getQueryString("token"));
                },
                dataType: "json",
                success: function (data) {
                    if (data.code==200){
                        if (num==1){
                            layer.closeAll();
                            layer.msg('保存成功')
                        }
                    }
                    num ++
                }
            });
            $.ajax({
                type: "post",
                url: "/system/System/setNavImg",
                cache: false,  //禁用缓存
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("token", getQueryString("token"));
                },
                data:{
                    nav_img: nav_img
                },
                dataType: "json",
                success: function (data) {
                    if (data.code==200){
                        if (num==1){
                            layer.closeAll();
                            layer.msg('保存成功')
                        }
                    }
                    num ++
                }
            });
        }, function(){

        });
    }

    //检查导航个数
    function checkNavNumber() {
        //检查个数
        var add_nav = $('.add_nav');
        if($('.iconName ul li').length >= 5){
            add_nav.hide();
        }else{
            add_nav.show();
        }
    }

    //获取可以使用的组件
    // function getUserAssembly(app_id,type){
    function getUserAssembly(data){
        $('.property-assembly').html(''); //先清空
        // if (type==1){
        //     $('.iphone-image').attr('src','/public/images/icon_goods_thumb_empty_300.png'); //先恢复默认图
        // }
        // return false;
        var R = new render();
        var assembly_id = $('input[name="assembly_id"]').val();
        $('.property-assembly').html(''); //先清空
        for(var i = 0;i<data.nav.length;i++){
            R.propertyList(data.nav[i],assembly_id);
            // if(data.nav[i]['is_essence'] == 1){
            //     R.propertyList(data.nav[i],assembly_id);
            // }
        }
        R.propertyEffect();
        R.propertyAction(1);
    }
    function render(version_id) {
        form.on('select(bindType)', function(data){
            if (data.value==1){
                $(".property.property-assembly").hide();
                $(".OutUrl").show();
            } else{
                $(".property.property-assembly").show();
                $(".OutUrl").hide();
            }
            return false;
        });
        this.version_id = version_id;
        //手机渲染
        this.iphone = function (info) {
            // var temp = '';
            if (!('iconStyle' in info)){
                info.iconStyle=0;
            }
            var temp = '<div class="conf-nav-div-'+info['nav_id']+' conf-nav-div-whole icon_style'+info['iconStyle']+'" data-color="'+info['selectedColor']+'" data-un_color="'+info['color']+'" data-un_code="' + encodeURI(info['image']) + '" data-code="' + encodeURI(info['selectedImage']) + '" data-nav_id="'+info['nav_id']+'" data-image_url="" data-isLogin="'+info['isNeedLogin']+'" data-icon_style="'+info['iconStyle']+'"><span class="iphone_code icon_style'+('iconStyle' in info?info['iconStyle']:0)+'">'+info['image']+'</span><span class="iphone_name icon_style'+('iconStyle' in info?info['iconStyle']:0)+'">'+info['title']+'</span></div>';
            $('.phoneBottom').append(temp);

        };
        //手机效果
        this.iphoneEffect = function (id) {
            var nav_div = $('.conf-nav-div-'+id);
            nav_div.css('color','#'+nav_div.data('color'));
            nav_div.find('.iphone_code').html(decodeURI(nav_div.data('code')));
            //iphone 图片显示
            // $('.iphone-image').attr('src',$("input[name='assembly_id']").val()=="0"?"/public/images/icon_goods_thumb_empty_300.png":nav_div.data('image_url'));
        };
        //组件效果
        this.propertyEffect = function () {
            var assembly_id = $('input[name="assembly_id"]').val();
            var nav_id = $('input[name="now_nav_id"]').val();
            var androidsrc =  $(".conf-nav-li-"+nav_id).data('androidsrc');
            $('.assembly_whole').each(function () {
                $(this).removeClass('layui-btn-normal').removeClass('type1').removeClass('type2').removeClass('layui-btn-disabled').removeClass('assembly-cancel').removeClass('assembly-submit');
                if(androidsrc&&(androidsrc == $(this).data('android_url')||androidsrc == $(this).data('front_end_entry'))){
                    // $(this).addClass('layui-btn-normal').addClass('type1').addClass('assembly-cancel');
                    $(this).addClass('layui-btn-normal').addClass('type1');
                }else{
                    if($.inArray($(this).data('assembly_id'),assembly_ids) < 0){ //判断组件是否在选中组件中
                        $(this).addClass('layui-btn-normal').addClass('assembly-submit');
                    }else{
                        $(this).addClass('type2').addClass('layui-btn-disabled');
                    }
                }
            });

        };
        //组件动作
        this.propertyAction = function (app_id) {
            var obj = this;
            //绑定点击事件
            $('.assembly-submit').unbind('click').on('click',function () {
                if (!isEditFun()){
                    return false
                }
                var data = {};
                data.nav_id = $('input[name="now_nav_id"]').val();
                data.assembly_id = $(this).data('assembly_id'); //选中组件id
                var input_assembly = $('input[name="assembly_id"]');
                input_assembly.val(data['assembly_id']);
                $('.conf-nav-li-'+data.nav_id).data('assembly_id',data['assembly_id']);
                $(this).siblings().removeClass('type1');
                $(this).addClass('type1');
                // $(this).addClass('type1').addClass('assembly-cancel');
                var tabIndex = null;
                for (var i = 0;i<VersionInfo.content.length;i++){
                    if (VersionInfo.content[i].key==data.nav_id){
                        tabIndex = i;
                    }
                }
                $(".conf-nav-li-"+data.nav_id).data('androidsrc',$(this).data('protogenesis')==1?$(this).data('android_url'):$(this).data('front_end_entry'));
                $(".conf-nav-li-"+data.nav_id).data('iossrc',$(this).data('protogenesis')==1?$(this).data('ios_url'):$(this).data('front_end_entry'));
                VersionInfo.content[tabIndex].iosSrc = $(this).data('protogenesis')==1?$(this).data('ios_url'):$(this).data('front_end_entry')
                VersionInfo.content[tabIndex].androidSrc = $(this).data('protogenesis')==1?$(this).data('android_url'):$(this).data('front_end_entry')
                VersionInfo.content[tabIndex].native = true;
                //重新加载组件
                // getUserAssembly(VersionInfo);
                return false
                var data = {};
                data.nav_id = $('input[name="now_nav_id"]').val();
                data.assembly_id = $(this).data('assembly_id'); //选中组件id

                $.post('/home/Admixture/changeAssembly',data,function (info) {
                    if(info.status == 1){
                        $('.conf-nav-div-'+data.nav_id).data('image_url',info.result['image_url']);
                        $('.iphone-image').attr('src',info.result['image_url']);
                        var input_assembly = $('input[name="assembly_id"]');
                        var old_assembly_id = input_assembly.val();
                        if(old_assembly_id > 0){
                            var splice_position = $.inArray(Number(old_assembly_id),assembly_ids);
                            if(splice_position > -1){
                                assembly_ids.splice(splice_position,1);
                            }

                        }
                        assembly_ids.push(info.result['assembly_id']);
                        input_assembly.val(info.result['assembly_id']);
                        $('.conf-nav-li-'+data.nav_id).data('assembly_id',info.result['assembly_id']);
                        //重新加载组件
                        getUserAssembly(app_id);
                    }else{
                        layer.msg(info.msg);
                    }
                },'json');
            });
            //取消组件操作绑定
            $('.assembly-cancel').unbind('click').on('click',function () {
                if (!isEditFun()){
                    return false
                }
                var data = {};
                data.nav_id = $('input[name="now_nav_id"]').val();
                var assembly_cancel_obj = $(this);
                $.post('/home/Admixture/cancelAssembly',data,function (info) {
                    if(info.status == 1){
                        $('.conf-nav-div-'+data.nav_id).data('image_url',info.data['image_url']);
                        $('.iphone-image').attr('src',info.data['image_url']);
                        var input_assembly = $('input[name="assembly_id"]');
                        var old_assembly_id = input_assembly.val();
                        if(old_assembly_id > 0) { //移除
                            var splice_position = $.inArray(Number(old_assembly_id),assembly_ids);
                            if(splice_position > -1){
                                assembly_ids.splice(splice_position,1);
                            }
                        }
                        input_assembly.val('');
                        $('.conf-nav-li-'+data.nav_id).data('assembly_id','');
                        //重新加载组件
                        getUserAssembly(app_id);
                    }else{
                        layer.msg(info.msg);
                    }
                },'json');
            });
        };

        //加载组件模板
        this.propertyList = function (info,assembly_id){
            if (!'protogenesis' in info['goods']){
                layer.msg('获取配置失败')
            }
            var temp = '<a class="layui-btn assembly_whole assembly-'+info['assembly_id']+'" data-protogenesis="'+('protogenesis' in info['goods']? info['goods']['protogenesis']:0)+'" data-android_url="'+info['goods']['android_entry']+'" data-front_end_entry="'+info['goods']['front_end_entry']+'" data-ios_url="'+info['goods']['ios_entry']+'" data-load_out_url="'+info['load_out_url']+'" data-assembly_status="'+info['assembly_status']+'" data-url="'+info['goods_url']+'" data-assembly_id="'+info['assembly_id']+'">'+info['all_goods']['goods_name']+'</a>';
            $('.property-assembly').append(temp);
        };
        //icon渲染
        this.iconList = function (info) {
            if (!('iconStyle' in info)){
                info.iconStyle = 0;
            }
            if (('isdefault' in info)&&info['isdefault']==1){
                defaultId = String(info.nav_id);
            }
            var temp = '<li class="conf-nav-li-'+info['nav_id']+' conf-nav-li-whole" data-iossrc="'+info['iosSrc']+'" data-androidsrc="'+info['androidSrc']+'" data-load_out_url="'+info['load_out_url']+'" data-assembly_id="'+info['assembly_id']+'" data-nav_id="'+info['nav_id']+'" data-image_url="" data-name="' + info['title'] + '" data-un_code="' + encodeURI(info['image']) + '" data-un_color="'+info['color']+'" data-color="'+info['selectedColor']+'" data-code="' + encodeURI(info['selectedImage']) + '" data-isLogin="'+info['isNeedLogin']+'" data-icon_style="'+info['iconStyle']+'">' +
                '<input type="radio" name="isdefault" data-isdefault="'+info['isdefault']+'" lay-filter="isdefault" value="'+info['nav_id']+'" title="">'+
                '<i class="iconfont up-nav">&#xe8cc;</i>' +
                '<i class="iconfont down-nav" style="">&#xe8cb;</i>' +
                '<span class="select-nav">'+info['title'] +'</span>'+
                '<i class="iconfont edit-nav" style="">&#xe8ce;</i>' +
                '<i class="iconfont delete-nav">&#xe600;</i>' +
                '<input class="input-name" maxlength="4" style="display: none;width:80%" type="text" value="" />'+
                '</li>';
            $('.iconName ul').append(temp);
        };
        //icon上的动作
        this.iconAction = function (id) {
            var nav_li = $('.conf-nav-li-'+id);
            var R = this;
            //选择动作
            nav_li.children('.select-nav').unbind('click').on('click',function () {
                R.linkageEffect($(this).parent().data('nav_id'));
            });
            var upClick=false;
            //上移动作
            nav_li.find('.up-nav').unbind('click').on('click',function () {
                if (!isEditFun()){
                    return false
                }
                if (upClick){
                    return false
                }
                upClick=true;
                var parent = $(this).parent();
                if(parent.prev().length > 0){
                    var nav_id = parent.data('nav_id');
                    var conf_div = $('.conf-nav-div-'+nav_id);
                    var height = parent.height();
                    //icon动画效果
                    parent.prev().animate({top:height+'px'},500,function () {
                        parent.prev().css('top','0px');
                    });
                    parent.animate({top:'-'+height+'px'},500,function () {
                        parent.css('top','0px');
                        parent.prev().before(parent);
                    });
                    //iphone 动画效果
                    var width = conf_div.width();
                    var nav_ids = [];
                    conf_div.prev().animate({right:'-'+width+'px'},500,function () {
                        conf_div.prev().css('right','0px');
                    });
                    conf_div.animate({right:width+'px'},500,function () {
                        conf_div.css('right','0px');
                        conf_div.prev().before(conf_div);
                    });
                    setTimeout(function () {
                        $('.iconName ul li').each(function () {
                            nav_ids.push($(this).data('nav_id'));
                        });
                        nav_ids_array = nav_ids;
                        // $.post('/home/Admixture/exchangeNavSort',{nav_ids:nav_ids,version_id:R.version_id},function (info) {
                        //     if(info.status == 1){
                        //     }else{
                        //         conf_div.next().after(conf_div);
                        //         parent.next().after(parent);
                        //         layer.msg(info.msg);
                        //     }
                        // },'json');
                    },600);


                }else{
//                 layer.msg('当前导航已经是第一位！');
                }
                setTimeout(function () {
                    upClick=false
                },600)
                return false;
            });
            //下移动作
            var downClick = false;
            nav_li.find('.down-nav').unbind('click').on('click',function () {
                if (!isEditFun()){
                    return false
                }
                if (downClick){
                    return false
                }
                downClick=true;
                var parent = $(this).parent();
                if(parent.next().length > 0){
                    var nav_id = parent.data('nav_id');
                    var conf_div = $('.conf-nav-div-'+nav_id);
                    //手机交换位置
                    //icon动画效果
                    var height = parent.height();
                    parent.next().animate({top:'-'+height+'px'},500,function () {
                        parent.next().css('top','0px');
                    });
                    parent.animate({top:height+'px'},500,function () {
                        parent.css('top','0px');
                        parent.next().after(parent);
                    });
                    //iphone 动画效果
                    var width = conf_div.width();
                    conf_div.next().animate({right:width+'px'},500,function () {
                        conf_div.next().css('right','0px');
                    });
                    conf_div.animate({right:'-'+width+'px'},500,function () {
                        conf_div.css('right','0px');
                        conf_div.next().after(conf_div);
                    });
                    var nav_ids = [];
                    setTimeout(function () {
                        $('.iconName ul li').each(function () {
                            nav_ids.push($(this).data('nav_id'));
                        });
                        nav_ids_array = nav_ids;
                        // $.post('/home/Admixture/exchangeNavSort',{nav_ids:nav_ids,version_id:R.version_id},function (info) {
                        //     if(info.status == 1){
                        //     }else{
                        //         conf_div.prev().before(conf_div);
                        //         parent.prev().before(parent);
                        //         layer.msg(info.msg);
                        //     }
                        // },'json');
                    },600)
                }else{
//                    layer.msg('当前导航已经是最后一位！');
                }
                setTimeout(function () {
                    downClick=false
                },600)
                return false;
            });
            //编辑动作
            nav_li.children('.edit-nav').unbind('click').on('click',function () {
                if (!isEditFun()){
                    return false
                }
                var parent = $(this).parent();
                parent.children('.iconfont').hide();
                parent.children('span').hide();
                var nav_id = parent.data('nav_id');
                parent.unbind('mouseenter').unbind('mouseleave');
                var input = parent.children('input.input-name');
                var name =  parent.children('.select-nav').text();
                input.show().focus().unbind('blur').on('blur',function(){
                    updateNavName($(this).val(),nav_id);
                    parent.children('.iconfont').show().css('visibility','hidden');
                    if($(this).val()){
                        parent.children('span').show();
                        parent.children('input.input-name').hide();
                    }
                });
                input.val(name);
                return false;
            });
            //删除动作
            nav_li.find('.delete-nav').unbind('click').on('click',function () {
                if (!isEditFun()){
                    return false
                }
                //检查个数
                var add_nav = $('.add_nav');
                if($('.iconName ul li').length <= 2){
                    layer.msg('最少2个导航');
                    return false;
                }
                var nav_id = $(this).parent().data('nav_id');
                layer.confirm('您确认删除此导航？', {
                    title:'删除导航',
                    btn: ['是的','取消'] //按钮
                }, function(){
                    // layer.closeAll();
                    // layer.load(1);
                    for(var i = 0;i<VersionInfo.content.length;i++){
                        if (VersionInfo.content[i]&&VersionInfo.content[i].key == nav_id){
                            VersionInfo.content.splice(i,1)
                        }
                    }
                    R.deleteLinkageEffect(nav_id);
                    layer.closeAll();
                    // $.post('/home/Admixture/saveNav',{nav_id:nav_id,status:0},function (info) {
                    //     layer.closeAll();
                    //     if(info.status == 1){
                    //         R.deleteLinkageEffect(nav_id);
                    //     }else{
                    //         layer.msg(info.msg);
                    //     }
                    // },'json');
                });
                return false;
            });

        };
        //icon效果
        this.iconEffect = function (id) {
            var nav_li = $('.conf-nav-li-'+id);
            nav_li.addClass('selected-nav');
            // var code = decodeURI(nav_li.data('code'));
            var code = decodeURI(nav_li.data('code'));
            var un_code = decodeURI(nav_li.data('un_code'));
            $('input[name="now_nav_id"]').val(id);
            $('input[name="assembly_id"]').val(nav_li.data('assembly_id'));
            $('.select_icon_box').css('color','#'+nav_li.data('color')).html(code);
            $('.un_select_icon_box').css('color','#'+nav_li.data('un_color')).html(un_code);
            $('.selected-icon').ColorPicker({
                color: '#'+nav_li.data('color'),
                onShow: function (colpkr) {
                    $(colpkr).fadeIn(500);
                    return false;
                },
                onHide: function (colpkr) {
                    $(colpkr).fadeOut(500);
                    $('.select_icon_box').css('color','#'+nav_li.data('color'));
                    return false;
                },
                onChange: function (hsb, hex, rgb) {
                    $('.select_icon_box').css('color','#'+hex);
                },
                onSubmit: function(hsb, hex, rgb, el) {
                    if (!isEditFun()){
                        return false
                    }
                    $(el).ColorPickerHide();
                    var save = {};
                    save.nav_id = $('input[name="now_nav_id"]').val();
                    save.color = hex;
                    updateNav(save);
                }
            });
            $('.un-selected-icon').ColorPicker({
                color:  '#'+nav_li.data('un_color'),
                onShow: function (colpkr) {
                    $(colpkr).fadeIn(500);
                    return false;
                },
                onHide: function (colpkr) {
                    $(colpkr).fadeOut(500);
                    $('.un_select_icon_box').css('color','#'+nav_li.data('un_color'));
                    return false;
                },
                onChange: function (hsb, hex, rgb) {
                    $('.un_select_icon_box').css('color','#'+hex);
                },
                onSubmit: function(hsb, hex, rgb, el) {
                    if (!isEditFun()){
                        return false
                    }
                    $(el).ColorPickerHide();
                    var save = {};
                    save.nav_id = $('input[name="now_nav_id"]').val();
                    save.un_color = hex;
                    updateNav(save);
                }
            });
        };
        //icon 删除
        this.deleteIcon = function (id) {
            $('.conf-nav-li-'+id).animate({left:50+'px',opacity:0},300,function () {
                $(this).remove();
                checkNavNumber();
            });
        };
        this.deleteIphone = function (id) {
            $('.conf-nav-div-'+id).animate({bottom:50+'px',opacity:0},300,function () {
                $(this).remove();
            });
        };
        //是否需要登录
        this.isNeedLoginEffect = function (id) {
            var isLogin = $('.conf-nav-li-'+id).attr('data-isLogin');
            form.val('isNeedLoginForm',{
                "isNeedLogin": isLogin==1?true:false
            })
            form.on('switch(isNeedLogin)', function(data){
                var selectNavId = $("input[name='isdefault']:checked").val()
                var status = data.elem.checked?1:0;
                if (id==selectNavId){
                    layer.msg('该导航栏是默认跳转，无法设置登录查看');
                    data.elem.checked = !data.elem.checked;
                    form.render();
                    return false
                }
                if (!isEditFun()){
                    data.elem.checked = !data.elem.checked;
                    form.render();
                    return false
                };
                var tabIndex = null;
                for (var i = 0;i<VersionInfo.content.length;i++){
                    if (VersionInfo.content[i].key==id){
                        tabIndex = i;
                    }
                }
                VersionInfo.content[tabIndex].isNeedLogin = status;
                $('.conf-nav-li-'+id).attr('data-isLogin',status);
                $('.conf-nav-div-'+id).attr('data-isLogin',status);
                // var index = layer.load(1, {
                //     shade: [0.2,'#333333'] //0.1透明度的白色背景
                // });
                // $.post('/home/Admixture/saveNav',{nav_id:id,isNeedLogin:status},function (info) {
                //     layer.close(index);
                //     if(info.status == 1){
                //         $('.conf-nav-li-'+id).attr('data-isLogin',status);
                //     }else{
                //         layer.msg(info.msg);
                //         data.elem.checked = !data.elem.checked;
                //         form.render('switch');
                //     }
                // },'json');
            });
        };

        //导航栏图标样式
        this.IconStyleEffect = function (id) {
            var icon_style = $('.conf-nav-li-'+id).attr('data-icon_style');
            form.val('isNeedLoginForm',{
                "icon_style": icon_style
            });
            form.on('select(icon_style)',function (data) {
                var old_icon_style = $('.conf-nav-li-'+id).attr('data-icon_style');
                var post_icon_style = data.value;
                if (!isEditFun()){
                    form.val('isNeedLoginForm',{
                        "icon_style": old_icon_style
                    });
                    return false
                };
                var tabIndex = null;
                for (var i = 0;i<VersionInfo.content.length;i++){
                    if (VersionInfo.content[i].key==id){
                        tabIndex = i;
                    }
                }
                VersionInfo.content[tabIndex].iconStyle = post_icon_style;
                $('.conf-nav-li-'+id).attr('data-icon_style',post_icon_style);
                $(".conf-nav-div-"+id).attr('data-icon_style',post_icon_style).removeClass('icon_style'+old_icon_style).addClass('icon_style'+post_icon_style);
                $(".conf-nav-div-"+id).find('span').removeClass('icon_style'+old_icon_style).addClass('icon_style'+post_icon_style)
            });
        };

        //绑定组件类型
        this.bindTypeEffect = function (id) {
            var assembly_id = $('.conf-nav-li-'+id).data('assembly_id');
            var load_out_url = $('.conf-nav-li-'+id).data('androidsrc');
            if ((/(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/.test(load_out_url))){
                form.val('bindTypeForm',{
                    bindType: '1',
                    load_out_url: load_out_url
                });
                $(".OutUrl").show();
                $(".property.property-assembly").hide();
            }else{
                $(".assembly_whole[data-android_url='"+load_out_url+"']").addClass('type1');
                form.val('bindTypeForm',{
                    bindType: '0'
                });
                $(".OutUrl").hide();
                $(".property.property-assembly").show();
            }
        };

        //li操作效果
        this.liHoverAction = function () {
            $('.conf-nav-li-whole').hover(function(){
                // $(this).children("i").css("opacity","1").css('display','inline-block');
                $(this).children("i").css("opacity","1");
                $(this).children("i").css('visibility','visible');
                if(!($(this).prev().length > 0)){
                    $(this).children(".up-nav").css("opacity","0");
                }
                if(!($(this).next().length > 0)){
                    $(this).children(".down-nav").css("opacity","0");
                }
                if($('.iconName ul li').length <= 2){
                    $(this).children(".delete-nav").css("opacity","0");
                }
            },function(){
                $(this).children("i").css("opacity","0")
            });
        };
        //执行联动
        this.linkageEffect = function (id) {
            $('.conf-nav-li-whole').removeClass('selected-nav');
            $('.conf-nav-div-whole').each(function () {
                $(this).css('color','#'+$(this).data('un_color'));
                $(this).find('.iphone_code').html(decodeURI($(this).data('un_code')));
            });
            this.isNeedLoginEffect(id);
            this.IconStyleEffect(id);
            this.bindTypeEffect(id);
            this.iconEffect(id);
            this.iphoneEffect(id);
            this.propertyEffect();
            this.propertyAction($('input[name="app_id"]').val());
        };

        //删除联动
        this.deleteLinkageEffect = function (id) {
            var select_nav = $('.selected-nav');
            if(select_nav.data('nav_id') == id){
                var select_nav_id = select_nav.prev().data('nav_id');
                if(!(select_nav_id > 0)) {
                    select_nav_id = select_nav.next().data('nav_id');
                }
                this.linkageEffect(select_nav_id);
            }
            this.deleteIcon(id);
            this.deleteIphone(id);
            //检查个数

        };

        //导航背景色
        this.navBackground = function (color) {
            $('.phoneBottom').css('background','#'+ color);
            var version_id = this.version_id;
            //颜色选择器
            $(".colorPick").ColorPicker({
                color: '#'+color,
                onShow: function (colpkr) {
                    $(colpkr).fadeIn(500);
                    return false;
                },
                onHide: function (colpkr) {
                    $(colpkr).fadeOut(500);
                    $('.phoneBottom').css('background','#'+ color);
                    return false;
                },
                onChange: function (hsb, hex, rgb) {
                    $('.phoneBottom').css('background','#'+ hex);
                },
                onSubmit: function(hsb, hex, rgb, el) {
                    if (!isEditFun()){
                        return false
                    }
                    $(el).ColorPickerHide();
                    nav_img = hex;
                    return false;
                    $.post('/home/Admixture/saveVersion',{version_id:version_id,nav_background:hex},function (info) {
                        if(info.status == 1){
                            color = hex;
                        }else{
                            layer.msg(info.msg);
                        }
                    },'json');
                }
            });
        };
        this.navBackgrounds = function (color) {
            // $('.phonetop').css('background','#'+ color);
            var version_id = this.version_id;
            //颜色选择器
            $(".colorPicktop").ColorPicker({
                color: '#'+color,
                onShow: function (colpkr) {
                    $(colpkr).fadeIn(500);
                    return false;
                },
                onHide: function (colpkr) {
                    $(colpkr).fadeOut(500);
                    $('.phonetop').css('background','#'+ colpkr);
                    return false;
                },
                onChange: function (hsb, hex, rgb) {
                    $('.phonetop').css('background','#'+ hex);
                },
                onSubmit: function(hsb, hex, rgb, el) {
                    if (!isEditFun()){
                        return false
                    }
                    $(el).ColorPickerHide();
                    nav_img = hex
                    return false
                    $.post('/home/Admixture/saveVersion',{version_id:version_id,top_background:hex},function (info) {
                        if(info.status == 1){
                            color = hex;
                        }else{
                            layer.msg(info.msg);
                        }
                    },'json');
                }
            });
        };
        this.navBackgroundTitle = function (color) {
            // $('.phonetop').css('background','#'+ color);
            var version_id = this.version_id;
            //颜色选择器
            $(".colorPickTitle").ColorPicker({
                color: '#'+color,
                onShow: function (colpkr) {
                    $(colpkr).fadeIn(500);
                    return false;
                },
                onHide: function (colpkr) {
                    $(colpkr).fadeOut(500);
                    $('.phonetop span').css('color','#'+ color);
                    return false;
                },
                onChange: function (hsb, hex, rgb) {
                    $('.phonetop span').css('color','#'+ hex);
                },
                onSubmit: function(hsb, hex, rgb, el) {
                    if (!isEditFun()){
                        return false
                    };
                    var tabIndex = null;
                    for (var i = 0;i<VersionInfo.content.length;i++){
                        if (VersionInfo.content[i].key==version_id){
                            tabIndex = i;
                        }
                    }
                    // VersionInfo.config['navBarTextColor'] = hex;
                    $(el).ColorPickerHide();
                    // $.post('/home/Admixture/saveVersion',{version_id:version_id,toptitle_background:hex},function (info) {
                    //     if(info.status == 1){
                    //         color = hex;
                    //     }else{
                    //         layer.msg(info.msg);
                    //     }
                    // },'json');
                }
            });
        }
    }

    function getVersionList() {
        layer.load(1);
        $.ajax({
            type: "get",
            url: "/system/system/getVersionconfList",
            cache: false,  //禁用缓存
            beforeSend: function (xhr) {
                xhr.setRequestHeader("token", getQueryString("token"));
            },
            dataType: "json",
            success: function (data) {

               for(var i = 0;i<data.data.length;i++){
                   $("select[name='version']").append('<option value="'+data.data[i].id+'">'+data.data[i].name.split('.')[0]+'</option>')
               };
               if (data.data.length){
                   version_id = data.data[0].id;
                   getVersionInfo(version_id);
               }
               form.render('select');
               form.on('select(version)', function(data){
                   layer.load(1);
                   version_id = data.value;
                   $('.iconName ul').html('');
                   $('.phoneBottom').html('');
                   getVersionInfo(data.value);
               })
            }
        });
    }
    function getNavImg(){
        $.ajax({
            type: "get",
            url: "/system/System/getNavImg",
            cache: false,  //禁用缓存
            beforeSend: function (xhr) {
                xhr.setRequestHeader("token", getQueryString("token"));
            },
            dataType: "json",
            success: function (data) {
                nav_img = data.data.nav_img;
                if((/(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/.test(nav_img))){
                    $(".phonetop").css({'background':'url('+nav_img+')  no-repeat','backgroundSize':'100% 100%'})
                }else{
                    $(".phonetop").css("background","#"+nav_img);
                    var Render = new render();
                    Render.navBackgrounds(nav_img);
                }
            }
        });
    }
    function getVersionInfo(id) {
        $.ajax({
            type: "post",
            url: "/system/system/getVersionconfOne",
            cache: false,  //禁用缓存
            beforeSend: function (xhr) {
                xhr.setRequestHeader("token", getQueryString("token"));
            },
            data:{
                id: id,
            },
            dataType: "json",
            success: function (data) {
                var base = new Base64();
                var info = JSON.parse(base.decode(data.data.value));
                VersionInfo = JSON.parse(JSON.stringify(info));
                var Render = new render(id);
                var one_nav = false;
                // window.localStorage.setItem('assembly_ids',JSON.stringify(info.result.used_assembly_ids))
                // for(v in info.result['nav_list']){
                for(var v = 0;v<info.content.length;v++){
                    if (info.content[v]){
                        info.content[v].nav_id = info.content[v].key;
                        if(info.content[v].type==1){
                            info.content[v].image = '<i class="iconfont">'+info.content[v].image+'</i>';
                        }else{
                            info.content[v].image = '<img src="'+info.content[v].image+'" />';
                        }
                        if(info.content[v].selectedType==1){
                            info.content[v].selectedImage = '<i class="iconfont">'+info.content[v].selectedImage+'</i>';
                            // info.content[v].image = '<i class="iconfont">'+info.content[v].image+'</i>';
                        }else{
                            info.content[v].selectedImage = '<img src="'+info.content[v].selectedImage+'" />';
                        }
                        if(one_nav == false){
                            one_nav = info.content[v]['nav_id'];
                        }
                        // if(info.content[v]['assembly_id']){
                        //     assembly_ids.push(info.content[v]['assembly_id']);
                        // }
                        //渲染页面
                        // $('.iconName ul').html('');
                        Render.iconList(info.content[v]);
                        Render.iphone(info.content[v]);
                        //动作加载
                        Render.iconAction(info.content[v]['nav_id']);
                    }else{
                        VersionInfo.content.splice(v,1);
                    }
                    // $("input[name='bgColor'][value='1']").prop('checked',true)
                }
                updateNavDefault();
                //初始化topnav的颜色和文字
                $('.phonetop span').css('color','#'+ info.config.toptitle_background);
                $(".phonetop").css("background","#"+info.config.top_background)
                $(".phonetop span").html(info.content[0].title);
                if (info.config.topStateType==1){
                    $("input[name='bgColor'][value='1']").prop('checked',true)
                    $(".statusbar_box").addClass('blackBg').removeClass('whiteBg');
                }else if(info.config.topStateType==2){
                    $("input[name='bgColor'][value='2']").prop('checked',true)
                    $(".statusbar_box").addClass('whiteBg').removeClass('blackBg');
                }else{
                    // $.post('/home/Admixture/saveVersion',{version_id:version_id,top_state_type:2},function (info) {
                    //     if(info.status == 1){
                    //         $("input[name='bgColor'][value='2']").prop('checked',true)
                    //         $(".statusbar_box").addClass('whiteBg').removeClass('blackBg');
                    //     }
                    // },'json');
                }
                //赋予li操作效果
                Render.liHoverAction();
                //赋予div操作效果
                $('.conf-nav-div-whole').unbind('click').click(function () {
                    Render.linkageEffect($(this).data('nav_id'));
                    //点击下方icon切换上方文字
                    $(".phonetop span").html($(this).children(".iphone_name").html())
                    return false;
                });

                //初始化 效果
                Render.linkageEffect(one_nav);
                //初始化 背景色
                Render.navBackground(info.config['nav_background']);
                // Render.navBackgrounds('d22222');
                Render.navBackgrounds(info.config['top_background']);
                Render.navBackgroundTitle(info.config['toptitle_background']);
                getUserAssembly(data.data.app_info_nav?JSON.parse(data.data.app_info_nav):{nav:[]})
                //检查个数
                checkNavNumber();
                layer.closeAll();
            }
        });
    }

    // function getVersionInfo(version_id) {
    //     $.get('/home/Admixture/getVersionInfo',{version_id:version_id},function (info) {
    //         if(info.status == 1){
    //             var Render = new render(version_id);
    //             var one_nav = false;
    //             window.localStorage.setItem('assembly_ids',JSON.stringify(info.result.used_assembly_ids))
    //             for(v in info.result['nav_list']){
    //                 if(one_nav == false){
    //                     one_nav = info.result['nav_list'][v]['nav_id'];
    //                 }
    //                 if(info.result['nav_list'][v]['assembly_id']){
    //                     assembly_ids.push(info.result['nav_list'][v]['assembly_id']);
    //                 }
    //                 //渲染页面
    //                 Render.iconList(info.result['nav_list'][v]);
    //                 Render.iphone(info.result['nav_list'][v]);
    //                 //初始化topnav的颜色和文字
    //                 $('.phonetop span').css('color','#'+ info.result.toptitle_background);
    //                 $(".phonetop").css("background","#"+info.result.top_background)
    //                 $(".phonetop span").html(info.result.nav_list[0].nav_name)
    //                 //动作加载
    //                 Render.iconAction(info.result['nav_list'][v]['nav_id']);
    //                 if (info.result.top_state_type==1){
    //                     $("input[name='bgColor'][value='1']").prop('checked',true)
    //                     $(".statusbar_box").addClass('blackBg').removeClass('whiteBg');
    //                 }else if(info.result.top_state_type==2){
    //                     $("input[name='bgColor'][value='2']").prop('checked',true)
    //                     $(".statusbar_box").addClass('whiteBg').removeClass('blackBg');
    //                 }else{
    //                     $.post('/home/Admixture/saveVersion',{version_id:version_id,top_state_type:2},function (info) {
    //                         if(info.status == 1){
    //                             $("input[name='bgColor'][value='2']").prop('checked',true)
    //                             $(".statusbar_box").addClass('whiteBg').removeClass('blackBg');
    //                         }
    //                     },'json');
    //                 }
    //                 // $("input[name='bgColor'][value='1']").prop('checked',true)
    //             }
    //             //赋予li操作效果
    //             Render.liHoverAction();
    //             //赋予div操作效果
    //             $('.conf-nav-div-whole').click(function () {
    //                 Render.linkageEffect($(this).data('nav_id'));
    //                 //点击下方icon切换上方文字
    //                 $(".phonetop span").html($(this).children(".iphone_name").html())
    //                 return false;
    //             });
    //
    //             //初始化 效果
    //             Render.linkageEffect(one_nav);
    //             //初始化 背景色
    //             Render.navBackground(info.result['nav_background']);
    //             // Render.navBackgrounds('d22222');
    //             Render.navBackgrounds(info.result['top_background']);
    //             Render.navBackgroundTitle(info.result['toptitle_background']);
    //             //检查个数
    //             checkNavNumber();
    //         }
    //     },'json');
    // }

    //监听默认导航选择
    function updateNavDefault(){
        //监听默认导航栏选择
        form.val('navForm',{"isdefault": defaultId});
        form.on('radio(isdefault)', function(data){
            //先不选择
            if (defaultId){
                form.val("navForm",{"isdefault": defaultId});
            } else{
                data.elem.checked = false;
                form.render('radio');
            }
            //询问框
            layer.confirm('确定设置该导航栏为APP默认跳转的导航栏吗？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                if ($(data.elem).parents('li').attr('data-islogin')==1){
                    layer.msg('已设置登录才能查看，不能默认为导航')
                    return false
                }
                updateNav({"nav_id": data.value,"isdefault":1});
                layer.closeAll();
            }, function(){

            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    }

    //更新或添加导航
    function updateNavName(nav_name,nav_id) {
        // if(!(nav_id > 0))nav_id = false;
        var version_id = $('input[name="version_id"]').val();
        if(!nav_name){
            layer.msg('请输入导航名称');
            return false;
        }
        var save = {};
        // save.version_id = version_id;
        save.nav_name = nav_name;
        save.nav_id = nav_id;
        updateNav(save); //更新操作
    }

    function updateNav(save){
        if (!isEditFun()){
            return false
        };
        var tabIndex = null;
        for (var i = 0;i<VersionInfo.content.length;i++){
            if (VersionInfo.content[i].key==save.nav_id){
                tabIndex = i;
            }
            if(save.isdefault==1){
                VersionInfo.content[i].isdefault = 0;
            }
        }
        // return false
        var Render = new render(version_id);
        if(!save.nav_id){
            //渲染页面
            // Render.iconList(info.result);
            // Render.iphone(info.result);
            // Render.linkageEffect(info.result['nav_id']);
            //动作加载
            // Render.iconAction(info.result['nav_id']);
        }else{
            var conf_nav_li = $('.conf-nav-li-'+save.nav_id);
            var conf_nav_div = $('.conf-nav-div-'+save.nav_id);
            if(save.nav_name){
                VersionInfo.content[tabIndex].title = save['nav_name'];
                conf_nav_li.children('.select-nav').html(save['nav_name']);
                conf_nav_div.children('.iphone_name').html(save['nav_name']);
                $(".phonetop span").html(save['nav_name'])
            }
            if(save.color){
                VersionInfo.content[tabIndex].selectedColor = save['color'];
                conf_nav_li.data('color',save['color']);
                conf_nav_div.css('color','#'+save['color']);
                conf_nav_div.data('color',save['color']);
            }
            if(save.un_color){
                VersionInfo.content[tabIndex].color = save['un_color'];
                conf_nav_div.data('un_color',save['un_color']);
                conf_nav_li.data('un_color',save['un_color']);
            }
            if(save.code){
                var code = '<i class="iconfont">&#'+save['code']+'</i>';
                VersionInfo.content[tabIndex].selectedImage = '&#'+save['code'];
                VersionInfo.content[tabIndex].selectedType = 1;
                if((/(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/.test(save.code))){
                    code = '<img src="'+save.code+'" />'
                    VersionInfo.content[tabIndex].selectedImage = save.code;
                    VersionInfo.content[tabIndex].selectedType = 0;
                }
                conf_nav_li.data('code',encodeURI(code));
                conf_nav_div.data('code', encodeURI(code));
                conf_nav_div.children('.iphone_code').html(code);
                $('.select_icon_box').html(code);
            }
            if(save.un_code){
                // VersionInfo.content[tabIndex].image = '&#'+save['code'];
                // conf_nav_li.data('un_code',encodeURI(save['un_code']));
                // conf_nav_div.data('un_code', encodeURI(save['un_code']));
                // $('.un_select_icon_box').html(save['un_code']);

                var un_code = '<i class="iconfont">&#'+save['un_code']+'</i>';
                VersionInfo.content[tabIndex].image = '&#'+save['un_code'];
                VersionInfo.content[tabIndex].type = 1;
                if((/(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/.test(save.un_code))){
                    un_code = '<img src="'+save.un_code+'" />';
                    VersionInfo.content[tabIndex].image = save.un_code;
                    VersionInfo.content[tabIndex].type = 0;
                }
                conf_nav_li.data('un_code',encodeURI(un_code));
                conf_nav_div.data('un_code', encodeURI(un_code));
                conf_nav_div.children('.iphone_code').html(un_code);
                $('.un_select_icon_box').html(un_code);
            }
            if (save.isdefault){
                defaultId = save.nav_id;
                VersionInfo.content[tabIndex].isdefault = 1;
                form.val('navForm',{"isdefault":defaultId});
            }
        }
        //赋予li操作效果
        Render.liHoverAction();
        //赋予div操作效果
        $('.conf-nav-div-whole').unbind('click').click(function () {
            Render.linkageEffect($(this).data('nav_id'));
            $(".phonetop span").html($(this).children(".iphone_name").html())
        });
        //检查个数
        checkNavNumber();
        return false
        $.post('/home/Admixture/saveNav',save,function (info) {
            if(info.status == 1){
                var Render = new render(version_id);
                if(!(save.nav_id > 0)){
                    //渲染页面
                    Render.iconList(info.result);
                    Render.iphone(info.result);
                    Render.linkageEffect(info.result['nav_id']);
                    //动作加载
                    Render.iconAction(info.result['nav_id']);
                }else{
                    var conf_nav_li = $('.conf-nav-li-'+save.nav_id);
                    var conf_nav_div = $('.conf-nav-div-'+save.nav_id);
                    if(save.nav_name){
                        conf_nav_li.children('.select-nav').html(info.result['nav_name']);
                        conf_nav_div.children('.iphone_name').html(info.result['nav_name']);
                        $(".phonetop span").html(info.result['nav_name'])
                    }
                    if(save.color){
                        conf_nav_li.data('color',info.result['color']);
                        conf_nav_div.css('color','#'+info.result['color']);
                        conf_nav_div.data('color',info.result['color']);
                    }
                    if(save.un_color){
                        conf_nav_div.data('un_color',info.result['un_color']);
                        conf_nav_li.data('un_color',info.result['un_color']);
                    }
                    if(save.code){
                        conf_nav_li.data('code',encodeURI(info.result['code']));
                        conf_nav_div.data('code', encodeURI(info.result['code']));
                        conf_nav_div.children('.iphone_code').html(info.result['code']);
                        $('.select_icon_box').html(info.result['code']);
                    }
                    if(save.un_code){
                        conf_nav_li.data('un_code',encodeURI(info.result['un_code']));
                        conf_nav_div.data('un_code', encodeURI(info.result['un_code']));
                        $('.un_select_icon_box').html(info.result['un_code']);
                    }
                }
                //赋予li操作效果
                Render.liHoverAction();
                //赋予div操作效果
                $('.conf-nav-div-whole').unbind('click').click(function () {
                    Render.linkageEffect($(this).data('nav_id'));
                    $(".phonetop span").html($(this).children(".iphone_name").html())
                });
                //检查个数
                checkNavNumber();
            }else{
                layer.msg(info.msg);
            }
        },'json');
    }

    $(function () {
        getVersionList();
        getNavImg();
        var version_id = getQueryString("versionid");
        $('input[name="app_id"]').val(getQueryString("appid"));
        $('input[name="version_id"]').val(version_id);
        //初始化
        // getVersionInfo(version_id);
        $('.add_nav').click(function () {
            if (!isEditFun()){
                return false
            }
            if($('.iconName ul li').length >= 5){
                layer.msg('导航栏最多存在5个');
                $(this).hide();
                return false;
            }
            $(".iconName ul").append('<div class="addNameLi" style="text-align: center;"><input  maxlength="3" placeholder="请输入导航名称" class="addName" style="width: 80%;"/></div>');
            $(this).hide();
            $(".addName").focus().blur(function(){
                if($(".addName").val()==""){
                    $(".add_nav").show();
                }else{
                    let newName=$(".addName").val();
                    var info = {
                        androidSrc: "",
                        color: "000000",
                        image: "&#xe658;",
                        iosSrc: "",
                        isInterceptScroll: false,
                        isNeedLogin: 0,
                        isNeedTitleBar: true,
                        key: 'tm_'+(VersionInfo.content.length+10),
                        native: false,
                        selectedColor: "F57023",
                        selectedImage: "&#xe658;",
                        selectedType: 1,
                        title: newName,
                        type: 1,
                        wwwFolderAndroid: "",
                        wwwFolderIos: ""
                    };
                    VersionInfo.content.push({
                        androidSrc: "",
                        color: "000000",
                        image: "&#xe658;",
                        iosSrc: "",
                        isInterceptScroll: false,
                        isNeedLogin: 0,
                        isNeedTitleBar: true,
                        key: 'tm_'+(VersionInfo.content.length+10),
                        native: false,
                        selectedColor: "F57023",
                        selectedImage: "&#xe658;",
                        selectedType: 1,
                        title: newName,
                        type: 1,
                        wwwFolderAndroid: "",
                        wwwFolderIos: ""
                    });
                    var Render = new render();
                    info.nav_id = info.key;
                    info.image = '<i class="iconfont">'+info.image+'</i>';
                    info.selectedImage = '<i class="iconfont">'+info.selectedImage+'</i>';
                    // if(info.content[v]['assembly_id']){
                    //     assembly_ids.push(info.content[v]['assembly_id']);
                    // }
                    //渲染页面
                    // $('.iconName ul').html('');
                    Render.iconList(info);
                    Render.iphone(info);
                    //动作加载
                    Render.iconAction(info['nav_id']);
                    updateNavName(newName);
                }
                $('.addNameLi').remove();
            });
        });
        //初始化 图标
        var icon_data = ['&#xe658;','&#xe601;','&#xe7fa;','&#xe62c;','&#xe83f;','&#xe722;','&#xe8c9;','&#xe60b;','&#xe60a;','&#xe63e;','&#xe610;','&#xe619;','&#xe663;','&#xe64e;'];
        var icon_data_value = ['xe658;','xe601;','xe7fa;','xe62c;','xe83f;','xe722;','xe8c9;','xe60b;','xe60a;','xe63e;','xe610;','xe619;','xe663;','xe64e;'];
        var un_select_store = $('.un_select_store');
        var select_store = $('.select_store');
        for(j in icon_data){
            un_select_store.append('<span data-type="0" data-code="'+icon_data[j]+'" data-code_value="'+icon_data_value[j]+'"><i class="iconfont iconfont-style">'+icon_data[j]+'</i></span>');
            select_store.append('<span data-type="0" data-code="'+icon_data[j]+'"  data-code_value="'+icon_data_value[j]+'" ><i class="iconfont iconfont-style">'+icon_data[j]+'</i></span>');
        }
        un_select_store.append('<span data-type="1" style="margin-top: 13px;"><img src="./images/add.png" style="width:25px;margin-left: 22px" class="unSetSelf"/></span>');
        select_store.append(' <span data-type="1" style="margin-top: 13px;"><img src="./images/add.png" style="width:25px;margin-left: 22px" class="setSelf"/></span>');
        var now_upload_obj = false;
        var is_select = false;
        $('.unSetSelf').click(function () {
            if (!isEditFun()){
                return false
            }
            var img_url = $(this).attr('src');
            if(img_url == $('.un_select_icon_box img').attr('src') || img_url == './images/add.png' ){
                now_upload_obj = $(this);
                is_select = false;
                $('.upload_img').click();
            }else{
                var save = {};
                save.nav_id = $('input[name="now_nav_id"]').val();
                save.un_type = 1;
                save.un_code = img_url;
                updateNav(save);
            }
        });
        $('.setSelf').click(function () {
            if (!isEditFun()){
                return false
            }
            var img_url = $(this).attr('src');
            if(img_url == $('.select_icon_box img').attr('src') || img_url == './images/add.png' ){
                now_upload_obj = $(this);
                is_select = true;
                $('.upload_img').click();
            }else{
                var save = {};
                save.nav_id = $('input[name="now_nav_id"]').val();
                save.type = 1;
                save.code = img_url;
                updateNav(save);
            }
        });
        layui.use('upload', function() {
            var $ = layui.jquery
                , upload = layui.upload;
            //普通图片上传
            var posterWidth = 75;
            var posterHeight = 75;
            var uploadInst = upload.render({
                elem: '.upload_img',
                size:"100"
                ,exts: 'png|gif' //只允许上传压缩文件
                , url: '/Admin/Ueditor/imageUp/savepath/conf/pictitle/conf/dir/images'
                , auto: false
                , choose: function(obj) {
                    obj.preview(function(index, file, result) {
                        var img = new Image();
                        img.onload = function() {
                            if (posterWidth == img.width && posterHeight == img.height) {
                                $('#test1').attr('src', result); //图片链接（base64）不支持ie8
                                // obj.upload(index, file);
                                GlobalUploadFile(file, 'image', function (res) {
                                    // _this.info.thumbnail.push( res.path)
                                    var save = {};
                                    save.nav_id = $('input[name="now_nav_id"]').val();
                                    if(is_select){
                                        save.type = 1;
                                        save.code =  res.path;
                                    }else{
                                        save.un_type = 1;
                                        save.un_code =  res.path;
                                    }
                                    updateNav(save);
                                    now_upload_obj.attr('src', res.path);
                                    layer.msg('上传成功');
                                }, function (err) {
                                    layer.msg('上传失败');
                                });
                            } else {
                                layer.msg('请上传75px*75px png或gif格式的图片');
                            }
                        };

                        img.src = result;
                    });
                }
                , done: function (res) {
                    layer.closeAll();
                    //如果上传失败
                    if (res.state !="SUCCESS") {
                        return layer.msg('上传失败');
                    }else{
                        var save = {};
                        save.nav_id = $('input[name="now_nav_id"]').val();
                        if(is_select){
                            save.type = 1;
                            save.code = res.url;
                        }else{
                            save.un_type = 1;
                            save.un_code = res.url;
                        }
                        updateNav(save);
                        now_upload_obj.attr('src',res.url);
                    }
                    //上传成功
                }
                , error: function () {
                    layer.msg("接口错误，稍后再试")
                }
            });
            var uploadInst1 = upload.render({
                elem: '.nav_upload',
                size: '2048'
                ,exts: 'png' //只允许上传压缩文件
                , url: '/Admin/Ueditor/imageUp/savepath/conf/pictitle/conf/dir/images'
                , auto: false
                , choose: function(obj) {
                    obj.preview(function(index, file, result) {
                        // var img = new Image();
                        // img.onload = function() {
                        //     if (posterWidth == img.width && posterHeight == img.height) {
                        //         // $('#test1').attr('src', result); //图片链接（base64）不支持ie8
                        //         // obj.upload(index, file);
                        //
                        //     } else {
                        //         layer.msg('请上传75px*75px png格式的图片');
                        //     }
                        // };
                        GlobalUploadFile(file, 'image', function (res) {
                            // _this.info.thumbnail.push( res.path)
                            nav_img = res.path;
                            $(".phonetop").css({'background':'url('+nav_img+')  no-repeat','backgroundSize':'100% 100%'})
                            layer.msg('上传成功');
                        }, function (err) {
                            layer.msg('上传失败');
                        });

                        // img.src = result;
                    });
                }
                , done: function (res) {
                    layer.closeAll();
                    //如果上传失败
                    if (res.state !="SUCCESS") {
                        return layer.msg('上传失败');
                    }else{
                        var save = {};
                        save.nav_id = $('input[name="now_nav_id"]').val();
                        if(is_select){
                            save.type = 1;
                            save.code = res.url;
                        }else{
                            save.un_type = 1;
                            save.un_code = res.url;
                        }
                        updateNav(save);
                        now_upload_obj.attr('src',res.url);
                    }
                    //上传成功
                }
                , error: function () {
                    layer.msg("接口错误，稍后再试")
                }
            });
        });

        //图标选择 未选中
        $('.un_select_store span').click(function () {
            if (!isEditFun()){
                return false
            }
            var save = {};
            save.nav_id = $('input[name="now_nav_id"]').val();
            save.un_code = '';
            if($(this).data('type') == 1){

            }else{
                save.un_code = $(this).data('code_value');
                save.un_type = 0;
            }
            if(save.un_code){
                updateNav(save);
            }
        });
        //图标选择
        $('.select_store span').click(function () {
            if (!isEditFun()){
                return false
            }
            var save = {};
            save.nav_id = $('input[name="now_nav_id"]').val();
            save.code = '';
            if($(this).data('type') == 1){

            }else{
                save.code = $(this).data('code_value');
                save.type = 0;
            }
            if(save.code){
                updateNav(save);
            }
        });
    });

    $('input[name="bgColor"]:radio').click(function(){
        var value = $(this).val()  //获取选中的radio的值
        if (!isEditFun()){
            $(this).prop('checked',!$(this).attr("checked"));
            return false
        }
        var version_id = getQueryString('versionid');
        if(value==1){
            $(".statusbar_box").addClass('blackBg').removeClass('whiteBg');
        }else{
            $(".statusbar_box").addClass('whiteBg').removeClass('blackBg');
        }
        return false
        $.post('/home/Admixture/saveVersion',{version_id:version_id,top_state_type:value},function (info) {
            if(info.status == 1){
                layer.msg('修改成功')
            }else{
                layer.msg(info.msg);
            }
        },'json');
    });
    function isEditFun(){
        if (sessionStorage.getItem("versionStatus")&&(sessionStorage.getItem("versionStatus")==2||sessionStorage.getItem("versionStatus")==3||sessionStorage.getItem("versionStatus")==4)){
            layer.msg("当前状态不能编辑哟！",{
                offset:'t',
                anim:6
            });
            return false
        }
        return true
    }
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

</script>
</body>
</html>